<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<link rel="stylesheet" href="index.css">
	</head>
	<body>
		<div id="app">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item>
					<el-col :span="10">
						<el-select v-model="selDeck" placeholder="deck">
							<el-option v-for="item in deckNames" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="2">
						&nbsp;
						</el-col>
					<el-col :span="10">
						<el-select v-model="selModel" placeholder="model">
							<el-option v-for="item in modelNames" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-button @click="lastTopic">上一题</el-button>
					<el-button type="primary" @click="addNote">制卡</el-button>
					<el-button @click="nextTopic">下一题</el-button>
				</el-form-item>
				<el-form-item label="来源">
					<el-input v-model="form.f_comefrom"></el-input>
				</el-form-item>
				<el-form-item label="问题">
					<el-input autosize type="textarea" v-model="form.f_question"></el-input>
				</el-form-item>
				<el-form-item label="选项">
					<el-input autosize type="textarea" v-model="form.f_answeroptions"></el-input>
				</el-form-item>
				<el-form-item label="答案">
					<el-input v-model="form.f_rightanswer"></el-input>
				</el-form-item>
				<el-form-item label="解析">
					<el-input autosize type="textarea" v-model="form.f_answeranalyce"></el-input>
				</el-form-item>
				<el-form-item label="定位句">
					<el-input autosize type="textarea" v-model="form.f_positioning_sentense"></el-input>
				</el-form-item>
				<el-form-item label="答案句">
					<el-input autosize type="textarea" v-model="form.f_answer_sentence"></el-input>
				</el-form-item>
				
			</el-form>
		</div>
	</body>

	<script type="text/javascript" src="/eel.js"></script>
	<!-- import Vue before Element -->
	<script src="vue.js"></script>
	<!-- import JavaScript -->
	<script src="index.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: function() {
				return {
					deckNames: [],
					selDeck: '',
					modelNames: [],
					selModel: '',
					form: {
						'f_comefrom': '',
						'f_question': '',
						'f_qustionindex': '',
						'f_answeroptions': '',
						'f_rightanswer': '',
						'f_answeranalyce': '',
						'f_positioning_sentense': '',
						'f_answer_sentence': '',
					}
				}
			},
			created() {
				this.selDeck =  sessionStorage.getItem("selDeck") || '';
				this.selModel =  sessionStorage.getItem("selModel") || '';
			},
			methods: {
				message: function(item) {
					this.$message(item);
				},
				addNote: async function() {
					//持久化选中的sel
					sessionStorage.setItem("selDeck",this.selDeck)
					sessionStorage.setItem("selModel",this.selModel)
					//给选项加上<br>		，这种方式方便在anki中直接编辑选项个数	
					var newForm = deepClone(this.form);
					console.log(newForm.f_answeroptions)
					newForm.f_answeroptions = newForm.f_answeroptions.replaceAll("\n","<br>")
					// 换行必须替换成br标签这样anki才能显示为换行
					newForm.f_question = newForm.f_question.replaceAll("\n","<br>")

					if (typeof eel != "undefined") {
						console.log(newForm)
						res = await eel.addNote(this.selDeck,this.selModel,newForm)()
						if (res) {
							this.$message({
								message: '制卡成功',
								type: 'success',
								duration:500
							});
						} else {
							this.$message.error('重复制卡！！')
						}
					}
				},
				lastTopic: function() {
					// TODO 有需要的时候再开发
				},
				nextTopic: async function() {
					if (typeof eel != "undefined") {
						note = await eel.nextTopic()()
						if (note) {
							this.form = note;
						} else {
							this.$message({
								message: '已经是最后一题了',
								type: 'warning'
							});
						}

					}
				},
			}
		})
		
		function setDeckNames(data) {
			app.deckNames = data;
		}
		function setModelNames(data) {
			app.modelNames = data;
		}
		
		if (typeof eel != "undefined") {
			eel.expose(setDeckNames)
			eel.expose(setModelNames)
		}
		
		function deepClone(target) {
		    // 定义一个变量
		    let result;
		    // 如果当前需要深拷贝的是一个对象的话
		    if (typeof target === 'object') {
		    // 如果是一个数组的话
		        if (Array.isArray(target)) {
		            result = []; // 将result赋值为一个数组，并且执行遍历
		            for (let i in target) {
		                // 递归克隆数组中的每一项
		                result.push(deepClone(target[i]))
		            }
		         // 判断如果当前的值是null的话；直接赋值为null
		        } else if(target===null) {
		            result = null;
		         // 判断如果当前的值是一个RegExp对象的话，直接赋值
		        } else if(target.constructor===RegExp){
		            result = target;
		        }else {
		         // 否则是普通对象，直接for in循环，递归赋值对象的所有值
		            result = {};
		            for (let i in target) {
		                result[i] = deepClone(target[i]);
		            }
		        }
		     // 如果不是对象的话，就是基本数据类型，那么直接赋值
		    } else {
		        result = target;
		    }
		     // 返回最终结果
		    return result;
		}
		
	</script>
</html>
